<template>
<div>
  <el-card style="margin:10px 10px;padding:10px;background:#EBEEF5">
    <div style="margin: 10px 0;width: 100%">

      <el-input v-model="workname" placeholder="请输入用户名" style="width: 15%;margin: 0 10px 0 50px" clearable/>
      <el-button type="primary" :icon="Search" style="margin-left: 10px" @click="load">查询</el-button>
      <el-button type="primary" :icon="Refresh" style="margin-left: 10px" @click="reset">重置</el-button>
    </div>
    <el-table :data="tableData"  :row-style="tableRowStyle" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}"
              border resizable="true" style="width: 100%">
      <el-table-column prop="id" label="ID" sortable/>
      <el-table-column prop="userId" label="学生id"/>
      <el-table-column prop="title" label="作品名称"/>
      <el-table-column fixed="right" label="操作" width="300px">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" @click="grade(scope.row.id)">打分
          </el-button>
<!--          <el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--            <template #reference>-->
<!--              <el-button :icon="Remove" type="danger">删除</el-button>-->
<!--            </template>-->
<!--          </el-popconfirm>-->
        </template>
      </el-table-column>
    </el-table>

  </el-card>

  <task-review
      :taskForm="taskForm"
      :reviewForm="reviewForm"
      :idx="idx"
      :editVisible="editVisible"
      @handleDigClose="handleDigClose"
  />

</div>
</template>

<script>
import request from "@/utils/request";
import TaskReview from "@/views/taskReview";
import { Edit,Remove,CirclePlus,Upload,Download,Search,Refresh,View,CircleClose } from '@element-plus/icons-vue';
export default {
  setup(){
    return{
      Edit,
      Remove,
      CirclePlus,
      Upload,
      Download,
      Search,
      Refresh,
      View,
      CircleClose
    }
  },
  name: 'Works',
  components: {TaskReview,Edit},
  data() {
    return {
      form: {},
      dialogVisible: false,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      workname:"",
      tableData: [],
      gameId:"",
      editVisible:false,
      taskForm:{},
      reviewForm:{},
      idx:0
    }
  },
  created() {
    this.gameId=sessionStorage.getItem("gameId")||null
    this.load();
  },
  methods: {
    tableRowStyle({ row, rowIndex }) {
      return { background:'#F2F6FC', color: '#0052d9', 'font-weight': 600 }
    },
    reset(){
      this.workname="";
      this.load()
    },

    handleUploadSuccess(res) {
      console.log(res)
      if (res.code === 200) {
        this.$message.success("导入成功")
        this.load()
      }
    },




    load() {
      request.get("/item/"+this.gameId).then(res=>{
        // console.log(res)
        this.tableData=res.data
      })


    },
    handleDigClose(){
      this.editVisible=false
    },
    grade(id){
      this.idx=id
      this.editVisible=true
      this.taskForm=this.tableData[id-1]

    }
  }
}
</script>

<style scoped>

</style>